<template>
  <div class="home">
    <!-- header -->
    <div class="header" :class="{ active: headerScroll }">
      <i class="iconfont icon-menu"></i>
      <div class="search" @click="goSearch">
        <span class="title_shop">淘宝商城</span>
        <i class="iconfont icon-search"></i>
        <span class="my_city">我的商城</span>
      </div>
      <!-- <div class="login" :class="{ active1: login }">登录</div> -->
      <router-link to="/login" tag="span" :class="{ active1: login }" class="login" v-if="!isLogin">登录</router-link>
        <router-link class="login" tag="span" to="/mine" :class="{ active1: login }" v-else>
        <van-icon name="user-o" />
      </router-link>
    </div>

    <!-- swipe -->
    <Swiper :swiper="swiperList"></Swiper>

    <!-- 菜单列表 -->
    <div class="catogry-list">
      <div class="item" v-for="item in categoryList" :key="item.categoryId">
        <img :src="item.imgUrl" alt="" />
        <div>
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>

    <GoodList :List="newList" :title="'新品上线'"></GoodList>
    <GoodList :List="hotList" :title="'热门商品'"></GoodList>
    <GoodList :List="preList" :title="'最新推荐'"></GoodList>

    <!-- Tabbar -->
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from "../components/Tabbar.vue";
import Swiper from "../components/Swiper.vue";
import { reactive, toRefs, onMounted, onBeforeMount } from "vue";
import GoodList from "../components/GoodsList.vue";
import { getHome } from "../service/home";
import {  getLocal } from "../common/js/ustil";
import {useRouter} from 'vue-router'
export default {
  components: {
    Tabbar,
    Swiper,
    GoodList,
  },
  setup() {
    const router = useRouter()
    const state = reactive({
      categoryList: [
        {
          name: "新蜂超市",
          imgUrl:
            "https://s.yezgea02.com/1604041127880/%E8%B6%85%E5%B8%82%402x.png",
          categoryId: 100001,
        },
        {
          name: "新蜂服饰",
          imgUrl:
            "https://s.yezgea02.com/1604041127880/%E6%9C%8D%E9%A5%B0%402x.png",
          categoryId: 100003,
        },
        {
          name: "全球购",
          imgUrl:
            "https://s.yezgea02.com/1604041127880/%E5%85%A8%E7%90%83%E8%B4%AD%402x.png",
          categoryId: 100002,
        },
        {
          name: "新蜂生鲜",
          imgUrl:
            "https://s.yezgea02.com/1604041127880/%E7%94%9F%E9%B2%9C%402x.png",
          categoryId: 100004,
        },
        {
          name: "新蜂到家",
          imgUrl:
            "https://s.yezgea02.com/1604041127880/%E5%88%B0%E5%AE%B6%402x.png",
          categoryId: 100005,
        },
        {
          name: "充值缴费",
          imgUrl:
            "https://s.yezgea02.com/1604041127880/%E5%85%85%E5%80%BC%402x.png",
          categoryId: 100006,
        },
        {
          name: "9.9元拼",
          imgUrl: "https://s.yezgea02.com/1604041127880/9.9%402x.png",
          categoryId: 100007,
        },
        {
          name: "领劵",
          imgUrl:
            "https://s.yezgea02.com/1604041127880/%E9%A2%86%E5%88%B8%402x.png",
          categoryId: 100008,
        },
        {
          name: "省钱",
          imgUrl:
            "https://s.yezgea02.com/1604041127880/%E7%9C%81%E9%92%B1%402x.png",
          categoryId: 100009,
        },
        {
          name: "全部",
          imgUrl:
            "https://s.yezgea02.com/1604041127880/%E5%85%A8%E9%83%A8%402x.png",
          categoryId: 100010,
        },
      ],
      hotList: [],
      newList: [],
      preList: [],
      swiperList: [],
      headerScroll: false,
      login: true,
      isLogin:false
    });

     onBeforeMount(() => { // 保证父组件已经取到了数组，Nav子组件能用上
      const token = getLocal('token')
      if (token) {
        state.isLogin = true
      }
      
    })

    // 向后端获取home资源
    onMounted(async () => {
      const { data } = await getHome();
      state.swiperList = data.carousels;
      state.hotList = data.hotGoodses;
      state.newList = data.newGoodses;
      state.preList = data.recommendGoodses;
      console.log(data, state.newList);
    });
    // 获取滚动距离
    // 在页面加载完毕之后
    onMounted(() => {
     window.addEventListener('scroll', () => {
        let scrollTop = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop
        // console.log(scrollTop);
        state.headerScroll = scrollTop > 100 ? true : false
        state.login = scrollTop > 100 ? false : true
      }, true)
    });

    const goSearch = () => {
      router.push('/search')
    }
    return {
      ...toRefs(state),
      goSearch
    };
  },
};
</script>

<style lang="less" scoped>
// html {
//   height: 100%;
//   position: absolute;
//   right: 0;
//   overflow-x: hidden;
//   overflow-y: scroll;
// }
.home{
  margin-bottom: 50px;
  
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px;
  height: 50px;
  width: 100%;
  z-index: 1000;
}
.active{
  background: #1baeae;
}
.active1{
  color: #1baeae!important; 
}
.search {
  height: 60%;;
  width: 66%;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  display: flex;
  align-items: center;
  line-height: 30px;
  z-index: 10000;
}
.search .title_shop {
  padding: 0 10px 0 10px;
  font-size: 20px;
  color: #1baeae;
  font-weight: bold;
}
.title_shop::after {
  content: "";
  width: 1px;
  height: 28px;
  margin-left: 10px;
  border-right: 2px solid;
  color: grey;
}
.search .iconfont {
  font-size: 20px;
  line-height: 30px;
}
// .icon-menu {
//   z-index: 10000;
// }
.search .my_city {
  font-size: 13px;
  line-height: 30px;
  margin-left: 5px;
}
.header .login {
  font-size: 18px;
  color: #fff;
  z-index: 1000;
}

.catogry-list {
  // margin-top: 130.53px;
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  font-size: 13px;
  width: 100%;
}
.catogry-list img {
  width: 36px;
  height: 36px;
  margin-bottom: 5px;
}
.catogry-list .item {
  width: 20%;
  height: 20%;
  margin-bottom: 10px;
  text-align: center;
}
</style>
